<template>
  <div>
    <el-card class="box-card" style="margin: 10px 15px 20px 10px;">
      <div slot="header" class="clearfix">
        <span class="blue">基本情况</span>
      </div>
      <el-row>
        <el-col :span="24">奖金名称：{{headFrom.jjMc}}</el-col>
        <el-col :span="24">
          <el-col :span="8">奖金编号：{{headFrom.jjBh}}</el-col>
          <el-col :span="8">奖金类型：{{textFilter[headFrom.jjLx]}}</el-col>
          <el-col :span="8">允许超额：{{headFrom.sfCeff}}</el-col>
        </el-col>
        <el-col :span="24">
          <el-col :span="8">奖金来源：{{textFilterly[headFrom.fpLy]}}</el-col>
          <el-col :span="8">专项奖金：{{headFrom.sfZx}}</el-col>
          <el-col :span="8">审核状态：{{headFrom.ffZt}}</el-col>
        </el-col>
        <el-col :span="24">
          <el-col :span="8">开始时间：{{headFrom.jjDateq}}</el-col>
          <el-col :span="8">结束时间：{{headFrom.jjDatez}}</el-col>
          <el-col :span="8">过期时间：{{headFrom.gqTime}}</el-col>
        </el-col>
        <el-col :span="24">
          <el-col :span="8">基础奖金：{{headFrom.jcJj}}</el-col>
          <el-col :span="8">追加奖金：{{headFrom.zjJj}}</el-col>
          <el-col :span="8">奖金总额：{{headFrom.jjZe}}</el-col>
        </el-col>
        <el-col :span="24">
          <el-col :span="8">部门分配：{{headFrom.bmJj}}</el-col>
          <el-col :span="8">员工分配：{{headFrom.ygJj}}</el-col>
          <el-col :span="8">定向分配：{{headFrom.dxFp}}</el-col>
        </el-col>
        <el-col :span="24">
          <el-col :span="8">分配总额：{{headFrom.fpZe}}</el-col>
          <el-col :span="8">奖金余额：{{headFrom.jjYe}}</el-col>
          <el-col :span="8">奖金池余额：{{headFrom.jjcYe}}</el-col>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="box-card" style="margin: 10px 15px 20px 10px;">
      <div slot="header" class="clearfix">
        <span class="blue">奖金明细</span>
        <el-button type="primary" plain @click="exportExcelXq('部门分配详情表','bmxqTableTwo')" style="float: right">导出</el-button>
      </div>
      <div class="text item">
        <el-table
          :data="dwQb" border
          style="width: 100%"
          ref="bmxqTableTwo"
          v-show="false">
          <el-table-column width="80" header-align="center" align="center" type="index" label="序号">
          </el-table-column>
          <el-table-column prop="rySjdw" label="单位名称" header-align="center" align="left" min-width="300">
          </el-table-column>
          <el-table-column prop="rs" label="发放人数" header-align="center" align="center" min-width="80">
          </el-table-column>
          <el-table-column prop="jjxMc" label="奖金项" header-align="center" align="center" min-width="80">
          </el-table-column>
          <el-table-column prop="jjJe" label="实际发放奖金(元)" header-align="center" align="right" min-width="100">
            <template slot-scope="scope">
              <!-- <span v-if="scope.row.jjJe*1>scope.row.yfJj*1" style="color:#ff3300">{{ $formatNum(scope.row.jjJe)}}</span> -->
              <span v-if="scope.row.jjxMc=='领导年终奖'">{{ $formatNum(scope.row['jjJeFpId'+jjxXq[0].jjxId])}}</span>
              <span v-else>{{ $formatNum(scope.row.jjJe)}}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="yfJj" label="已发奖金(元)" header-align="center" align="right" min-width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.jjJe*1!=scope.row.yfJj*1" style="color:#ff3300">
              {{ $formatNum(scope.row.yfJj)}}
              </span>
              <span v-else>{{ $formatNum(scope.row.yfJj)}}</span>
            </template>
          </el-table-column> -->
          
        </el-table>
        <el-table
          :data="dwQb" border
          style="width: 100%">
          <!-- <el-table-column type="expand">
            <template slot-scope="slotScope">

              <el-table
                :data="getGwQb(slotScope.row)" border
                style="width: 100%"
                ref="ryxqTable">
                <el-table-column width="80" header-align="center" align="center" type="index" label="序号">
                </el-table-column>
                <el-table-column prop="ryCode" label="编号" header-align="center" align="center" min-width="100">
                </el-table-column>
                <el-table-column prop="ryName" label="姓名" header-align="center" align="center" min-width="100">
                </el-table-column>
                <el-table-column prop="ryZhiwei" label="岗位" header-align="center" align="center" min-width="100">
                </el-table-column>
                <el-table-column prop="jjxMc" label="奖金项" header-align="center" align="center" min-width="80">
                </el-table-column>
                <el-table-column prop="jjJe" label="奖金(元)" header-align="center" align="right" min-width="100">
                  <template slot-scope="scope">
                   
                    <span v-if="scope.row.jjxMc=='领导年终奖'">
                      {{ $formatNum(scope.row['jjJeFpId'+jjxXq[0].jjxId])}}
                    </span>
                    <span v-else>
                      {{$formatNum(scope.row.jjJe)}}
                    </span>
                  </template>
                </el-table-column>
                
              </el-table>
              <el-button type="primary" plain @click="exportExcelXq('人员分配详情表','ryxqTable')" class="fr mt10">导出详细</el-button>
            </template>
          </el-table-column> -->
          <el-table-column width="80" header-align="center" align="center" type="index" label="序号">
          </el-table-column>
          <el-table-column prop="rySjdw" label="单位名称" header-align="center" align="left" min-width="300">
          </el-table-column>
          <el-table-column prop="rs" label="发放人数" header-align="center" align="center" min-width="80">
          </el-table-column>
          <el-table-column prop="jjxMc" label="奖金项" header-align="center" align="center" min-width="80">
          </el-table-column>
          <el-table-column prop="jjJe" label="实际发放奖金(元)" header-align="center" align="right" min-width="100">
            <template slot-scope="scope">
              <!-- <span v-if="scope.row.jjJe*1>scope.row.yfJj*1" style="color:#ff3300">{{ $formatNum(scope.row.jjJe)}}</span> -->
              <span v-if="scope.row.jjxMc=='领导年终奖'">{{ $formatNum(scope.row['jjJeFpId'+jjxXq[0].jjxId])}}</span>
              <span v-else>{{ $formatNum(scope.row.jjJe)}}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="yfJj" label="已发奖金(元)" header-align="center" align="right" min-width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.jjJe*1!=scope.row.yfJj*1" style="color:#ff3300">
              {{ $formatNum(scope.row.yfJj)}}
              </span>
              <span v-else>{{ $formatNum(scope.row.yfJj)}}</span>
            </template>
          </el-table-column> -->
          <el-table-column prop="jjJe" label="操作" header-align="center" align="center" min-width="100">
            <template slot-scope="scope">
              <el-button type="primary"  @click="handleDetail(id,scope.row,2)">查看明细</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-table v-if="isShowDetail" ref="ffMxABTable"
                :data="grQb" border stripe
                style="width: 100%;height: 65vh; overflow-y: auto;">
                <el-table-column width="80" header-align="center" align="center" type="index" label="序号">
                </el-table-column>
                <el-table-column prop="ryCode" label="编号" header-align="center" align="center" min-width="100">
                </el-table-column>
                <el-table-column prop="ryName" label="姓名" header-align="center" align="center" min-width="100">
                </el-table-column>
                <el-table-column prop="ryZhiWei" label="岗位" header-align="center" align="center" min-width="100">
                </el-table-column>
                <el-table-column prop="ryZwjb" label="职级" header-align="center" align="center" min-width="100">
                </el-table-column>
                <el-table-column prop="ry_sjdw" label="部门" header-align="center" align="center" min-width="100">
                </el-table-column>
                <!-- <el-table-column prop="config02" label="考核" header-align="center" align="center" min-width="100">
                </el-table-column>
                <el-table-column prop="config03" label="排名" header-align="center" align="center" min-width="100">
                </el-table-column> -->
                <el-table-column label="奖金" header-align="center" align="center">
                  <el-table-column prop="jj_je" label="合计(元)" header-align="center" align="right" min-width="100">
                    <template slot-scope="scope">
                      <span v-if="scope.row.jjxMc=='领导年终奖'">
                        {{ $formatNum(scope.row.jj_je_ff||0) }}
                      </span>
                      <span v-else>
                        {{ $formatNum(scope.row.jj_je||0) }}
                      </span>

                    </template>
                  </el-table-column>
                  <el-table-column v-if="showYf" label="已发奖金" prop="jjJeTj" header-align="center" align="center">
                    <template slot-scope="scope">
                      <span>{{scope.row.jjJeTj}}</span>
                    </template>
                  </el-table-column>
                  <!-- <el-table-column prop="jjJeTj" label="年度统计金额(元)" header-align="center" align="right" min-width="100">
                    <template slot-scope="scope">
                      {{ $formatNum(scope.row.jjJeTj||0) }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="jjJeFf" label="统计领导已发金额(元)" header-align="center" align="right" min-width="100">
                    <template slot-scope="scope">
                      {{ $formatNum(scope.row.jjJeFf||0) }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="ydje" label="应得金额(元)" header-align="center" align="right" min-width="100">
                    <template slot-scope="scope">
                      {{ $formatNum(scope.row.ydje||0) }}
                    </template>
                  </el-table-column> -->
                  <el-table-column v-for="(item, index) in jjxTjXq" :key="index" :label="item.jjxName"
                                  header-align="center" align="center">
                    <el-table-column min-width="100" :prop="'jj_je_id'+item.jjxId+''" label="奖金小计(元)" header-align="center"
                                    align="right">
                      <template slot-scope="scope">
                        <span v-if="scope.row.jjxMc=='领导年终奖'">
                          {{ $formatNum(scope.row.jjJeFf) }}
                        </span>
                        <span v-else>
                          {{ $formatNum(scope.row['jj_je_id' + item.jjxId]||0) }}
                        </span>

                      </template>
                    </el-table-column>
                    <el-table-column min-width="100" :prop="'jj_je_dx_id'+item.jjxId+''" label="定向奖金(元)"
                                    header-align="center"
                                    v-if="dx"
                                    align="right">
                      <template slot-scope="scope">
                        {{ $formatNum(scope.row['jj_je_dx_id' + item.jjxId]||0) }}
                      </template>
                    </el-table-column>
                    <el-table-column min-width="100" :prop="'jj_je_fp_id'+item.jjxId+''" label="分配奖金(元)"
                                    header-align="center"
                                    align="right">
                      <template slot-scope="scope">
                        {{ $formatNum(scope.row['jj_je_fp_id' + item.jjxId]||0)}}
                      </template>
                    </el-table-column>
                    <el-table-column min-width="100" :prop="'jj_je_jk_id'+item.jjxId+''" label="加扣奖金(元)"
                                    header-align="center"
                                    align="right">
                      <template slot-scope="scope">
                        {{ $formatNum(scope.row['jj_je_jk_id' + item.jjxId]||0) }}
                      </template>
                    </el-table-column>
                  </el-table-column>
                  <el-table-column prop="jjJeId" label="其他奖金(元)" header-align="center" v-if="qt" align="right"
                                  min-width="100">
                    <!--                    <template slot-scope="scope">-->
                    <!--                      {{ $formatNum(scope.row.jjJeId) }}-->
                    <!--                    </template>-->
                  </el-table-column>
                </el-table-column>
                <el-table-column label="备注" header-align="center" align="left" min-width="200">
                  <template slot-scope="scope">
                    {{ getSm(scope.row) }}
                  </template>
                </el-table-column>
              </el-table>
              <el-button  v-if="isShowDetail" type="primary" plain @click="exportExcelXq('人员分配详情表','ffMxABTable')" class="fr mt10">导出详细</el-button>
      </div>
    </el-card>
    <el-card class="box-card" style="margin: 10px 15px 20px 10px;">
      <div slot="header" class="clearfix">
        <span class="blue">奖金池信息</span>
      </div>
      <el-table
          :data="jjcList" border
          style="width: 100%"
          ref="bmxqTable">
          <el-table-column width="80" header-align="center" align="center" type="index" label="序号">
          </el-table-column>
          <el-table-column prop="jjxName" label="奖金项名称" header-align="center" align="left" min-width="300">
          </el-table-column>
          <el-table-column prop="bmName" label="部门名称" header-align="center" align="center" min-width="80">
          </el-table-column>
          <el-table-column prop="zdFpJe" label="指定分配金额" header-align="center" align="right" min-width="100">
          </el-table-column>
          <el-table-column prop="yFpJe" label="已分配金额" header-align="center" align="right" min-width="100">
          </el-table-column>
          <el-table-column prop="ccJe" label="超出金额" header-align="center" align="right" min-width="100">
          </el-table-column>
          <el-table-column prop="jjcQk" label="使用奖金情况" header-align="center" align="right" min-width="100">
          </el-table-column>
        </el-table>
    </el-card>
  </div>
</template>

<script>
import {
  workForlwFf,
  viewRyDetail
} from '@/api/jiangjin/jiangjinfpjjfpdjb'

import * as echarts from "echarts";
import FileSaver from 'file-saver'
import XLSX from "xlsx";

export default {
  components: {},

  data() {
    return {
      dataForm: {},
      jiangjinFpJjfpdjb: {},
      jjxXq: [],
      jjxTjXq: [],
      jjxJeXq: {},
      dwQb: [],
      grQb: [],
      zjQb: [],
      jcList: [],
      dx: false,
      jjcList:[],
      headFrom:{},
      textFilter:{
        1:"年度",
        2:"月度",
        3:"日常",
      },
      textFilterly:{
        1:"奖金池",
        2:"单位自筹",
      },
      jjcList:[],
      isShowDetail:false,
      id:""
    }
  },
  created: function () {

  },
  methods: {
    init(formInfo,
         formInfoDetailed,
         formData,
         GUID,
         wfYwMain,
         wfYwStream,
         dqYwStream,
         dqTask) {
      this.loadData(wfYwMain.ywLyid)
    },
    init1(fpId) {
      this.loadData(fpId)
    },
    handleDetail(id,row,flag){
       this.dataForm=[];
      this.isShowDetail=true;
      var deptId=row.deptId;
      if(flag==1){
          deptId='x';
      }
      viewRyDetail(id,deptId).then(response => {
        this.dataForm = response.data.data;
        if(row.jjxMc=='领导年终奖'){
          this.showYf=true
        }else{
          this.showYf=false
        }
        this.jiangjinFpJjfpdjb = response.data.data.jiangjinFpJjfpdjb;
        if (this.jiangjinFpJjfpdjb && this.jiangjinFpJjfpdjb.jjxJeXq) {
          this.jjxJeXq = JSON.parse(this.jiangjinFpJjfpdjb.jjxJeXq)
        }
        if (this.jiangjinFpJjfpdjb && this.jiangjinFpJjfpdjb.jjxXq) {
          this.jjxXq = JSON.parse(this.jiangjinFpJjfpdjb.jjxXq)
        }
        if (this.jiangjinFpJjfpdjb && this.jiangjinFpJjfpdjb.jjxTjXq) {
          this.jjxTjXq = JSON.parse(this.jiangjinFpJjfpdjb.jjxTjXq)
        }
        this.grQb = response.data.data.grQb;
        for (var i in this.grQb) {
          if (this.grQb[i].jjJeDxId > 0) {
            this.dx = true;
          }
          if (this.grQb[i].jjJeJkId > 0) {
            this.jk = true;
          }
          if (this.grQb[i].jjJeId > 0) {
            this.qt = true;
          }
        }
        this.visible = true;
      });
    },
    exportExcelXq(name,ref) {
      const excelName = name;
      try {
        const $e = this.$refs[ref].$el
        let $table = $e.querySelector('.el-table__fixed')
        //console.log("$e:"+JSON.stringify($e))
         
        if (!$table) {

          $table = $e
        }
        console.log("$table:"+$table)
        const wb = XLSX.utils.table_to_book($table, {
          raw: true
        })
        console.log("wb:"+JSON.stringify(wb))
        const wbout = XLSX.write(wb, {
          bookType: 'xlsx',
          bookSST: true,
          type: 'array'
        })
        FileSaver.saveAs(
          new Blob([wbout], {
            type: 'application/octet-stream'
          }),
          `${excelName}.xlsx`,
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.error(e)
      }
    },
    /**
     * 加载数据
     */
    loadData(id) {
      this.isShowDetail=false
      this.id=id
      workForlwFf(id).then(response => {
        this.dataForm = response.data.data;
        console.log(response.data.data)
        this.headFrom = response.data.data.jiangjinFpJjfpdjb;
        this.jjcList=response.data.data.jjcXx
        this.jiangjinFpJjfpdjb = response.data.data.jiangjinFpJjfpdjb;
        if (this.jiangjinFpJjfpdjb && this.jiangjinFpJjfpdjb.jjxJeXq) {
          this.jjxJeXq = JSON.parse(this.jiangjinFpJjfpdjb.jjxJeXq)
        }
        if (this.jiangjinFpJjfpdjb && this.jiangjinFpJjfpdjb.jjxXq) {
          this.jjxXq = JSON.parse(this.jiangjinFpJjfpdjb.jjxXq)
        }
        if (this.jiangjinFpJjfpdjb && this.jiangjinFpJjfpdjb.jjxTjXq) {
          this.jjxTjXq = JSON.parse(this.jiangjinFpJjfpdjb.jjxTjXq)
        }
        console.log(this.jiangjinFpJjfpdjb.jjxXq[0].jjxId)
        this.dwQb = response.data.data.dwQb;
        this.grQb = response.data.data.grQb;
        this.zjQb = response.data.data.zjQb;
        this.jcList = response.data.data.jcList;
        for (var i in this.grQb) {
          if (this.grQb[i].jjJeDxId > 0) {
            this.dx = true;
            break;
          }
        }

      });
    },
    getGwQb(r) {
      let data = [];
      for (var i in this.grQb) {
        if (this.grQb[i].rySjdwCode == r.rySjdwCode) {
          data.push(this.grQb[i]);
        }
      }
      return data;
    },
    getSm(r) {
      let data = [];
      for (var i in this.jcList) {
        if (this.jcList[i].userCode == r.ryCode) {
          data.push(this.jcList[i].jjSm + "（" + this.jcList[i].lx + this.jcList[i].jjJe + "）");
        }
      }
      return data.join();
    },
    getFormData() {
      var valid = true;
      if (valid) {
        this.$emit("returnFormData", null);
      }
    }
  }
}

</script>

<style>
.el-table__expanded-cell{
  padding:10px 0 10px 50px !important;
}
</style>
